<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1024 - 隐秘的曲线</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div style="margin: 20px;padding-top: 30px">
    <p1>1024程序员节快乐! 第一个完成这个题目的可以领取一份节日礼物</p1>
    <br/>
    <div>之前电视剧&lceil;隐秘的角落&rfloor;大火, 剧中张东升老师讲了一个关于曲线的故事</div>
    <div>在下方补全"一些"坐标, 还原这个曲线, 就能获得领奖码了</div>
</div>
<div style="width: 20%; height:600px;float: left;margin: 20px">
    <textarea style="width: 100%; height: 400px" id="editarea"></textarea>
    <button id="givemefive">给我一些坐标点</button>
    <button id="tipbutton">小提示</button>
    <button id="submit">提交答案</button>
    <div id="tips" style="display: none">
        <li>猜猜一共要求多少个坐标</li>
        <li>坐标要按照顺序给出</li>
        <li>坐标值直接取整数</li>
    </div>
</div>
<div id="main" style="width: 600px;height:600px;float: left"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var editarea = $("#editarea");
    var mycsrftoken = "";
    var baseurl = window.location.href;

    option = {
        grid: {
            show: false
        },
        xAxis: {
            min: -2800,
            max: 2800,
        },
        yAxis: {
            min: -4500,
            max: 1800,
        },
        series: [{
            data: []
            ,
            symbol: 'circle',
            type: 'line',
            smooth: true
        }]
    };

    function draw() {
        var data = strToArr(editarea.val());
        data.push(data[0]);
        option.series[0].data = data;
        myChart.setOption(option);
    }

    function strToArr(str) {
        str = str.trim();
        var arr = str.split("\n");
        var result = [];
        for (let i = 0; i < arr.length; i++) {
            result.push(arr[i].split(","));
        }
        return result;
    }

    function arrToStr(arr) {
        var result = "";
        for (var i in arr) {
            result += arr[i] + "\n"
        }
        return result;
    }

    function appendTo(str) {
        let oldV = editarea.val().trim();
        if (oldV.length === 0) {
            editarea.val(str);
        } else {
            editarea.val(oldV + "\n" + str);
        }

    }

    $.get(baseurl + "/get-first-24", function (a, b, c) {
        mycsrftoken = c.getResponseHeader("mycsrftoken");
        appendTo(arrToStr(a));
        draw();
    });

    editarea.bind('input propertychange', 'textarea', function () {
        draw();
    });

    $("#submit").click(function () {
        var data = strToArr(editarea.val());
        $.ajax({
            url: baseurl + '/check',
            type: "post",
            data: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json',
            },
            dataType: "json",
            success: function (a, b, c) {
                alert(a);
            },
            error: function (a) {
                alert(a.responseText);
            },
        });
    });

    $("#givemefive").click(function () {
        $.ajax({
            headers: {
                'mycsrftoken': mycsrftoken,
            },
            url: baseurl + '/get',
            type: "get",
            data: {
                from: option.series[0].data.length - 1
            },
            success: function (a, b, c) {
                mycsrftoken = c.getResponseHeader("mycsrftoken");
                appendTo(arrToStr(a));
                draw();
            },
            error: function (a) {
                mycsrftoken = a.getResponseHeader("mycsrftoken");
            },
        });

    });

    $("#tipbutton").hover(
        function () {
            $("#tips").show();
        }, function () {
            $("#tips").hide();
        }
    )
</script>
</body>
</html>